// 测试用
<template>
  <div class="my-suggest-form">
     <div class="group-item weui-cell">
        <div class="weui-cell__hd">上传文件</div>
        <div class="weui-cell__bd"></div>
      </div>
      <ul class="img-list">
        <li v-for="(item,index) in files" :key="index">
          <div class="bg-img" :style="{backgroundImage: 'url('+item.blob+')'}"></div>
        </li>
        <li>
          <vue-file-upload class="upload"
                           label=""
                           url=''
                           ref="vueFileUploader"
                           :multiple="true"
                           v-bind:filters="filters"
                           v-bind:events='cbEvents'
                           v-bind:request-options="reqopts"
                           v-on:onAdd="onAddItem"></vue-file-upload>
        </li>
      </ul>
      </div>
</template>

<script>
  import VueFileUpload from 'vue-file-upload'

  export default {
    name: 'MySuggestForm',
    components: {
      VueFileUpload
    },
    data () {
      return {
        topic: '',
        content: '',
        isAnonymous: true,
        name: '',
        phone: '',
        email: '',
        pageData: {},
        list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],
        files: [],
        filters: [
          {
            name: 'imageFilter',
            fn (file) {
              let type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'
              return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1
            }
          }
        ],
        // 回调函数绑定
        cbEvents: {
          onCompleteUpload: (file, response, status, header) => {
            console.log(file)
            console.log('finish upload;')
          }
        },
        // xhr请求附带参数
        reqopts: {
          formData: {
            tokens: 'tttttttttttttt'
          },
          responseType: 'json',
          withCredentials: false
        }
      }
    },
    methods: {
      onStatus (file) {
        if (file.isSuccess) {
          return '上传成功'
        } else if (file.isError) {
          return '上传失败'
        } else if (file.isUploading) {
          return '正在上传'
        } else {
          return '待上传'
        }
      },
      onAddItem (files) {
        this.files = files
        this.files.forEach(item => {
          item.blob = window.URL.createObjectURL(item.file)
        })
        console.log(this.files)
      },
      uploadItem (file) {
        // 单个文件上传
        file.upload()
      },
      uploadAll () {
        // 上传所有文件
        this.$refs.vueFileUploader.uploadAll()
      },
      clearAll () {
        // 清空所有文件
        this.$refs.vueFileUploader.clearAll()
      }
    },
    created () {
    }
  }
</script>

<style scoped lang='less'>
  .my-suggest-form {
    ul.img-list {
      list-style: none;
      margin: 0 15px;
      li {
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
        margin-bottom: 12px;
        width: 80px;
        height: 80px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed #cbcbcb;
        .bg-img {
          width: 100%;
          height: 100%;
          background-size: cover;
        }
        .upload {
          width: 80px;
          height: 80px;
          padding: 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          border: 0 none;
          background-color: #f5f5f5;
          &:after {
            content: '+';
            font-size: 50px;
            color: #cbcbcb;
          }
        }
        &:last-child {
          margin-left: -4px;
        }
      }
    }
    .custom-btn {
      margin: 20px;
      .confirm-btn {
        background-color: #dc220b;

      }
    }
  }

  .clearfix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: '.';
  }
</style>
